<template lang="pug">
  .clearfix
    Modal(
      width="700"
      v-model="isShowMobilizeModal"
      title="调动"
    )
      Row.mb-10
        Col.pl-10.line-h-32.text-right.pr-15(span="7") 调离人员：
        Col.line-h-32(span="17")
          .display-inline-block(v-for="(item, index) of selectedEmployeeArr")
            |{{item.name}}
            span(v-if="index + 1 !== selectedEmployeeArr.length") ，
      Row.mb-10
        Col.pl-10.line-h-32.text-right.pr-15(span="7") 调离单位：
        Col(span="17")
          Select(v-model="selectedCompanyId" clearable filterable)
            Option(
              v-for="(c_item, index) in companyListDown"
              :value="c_item.value"
              :key="index"
            ) {{ c_item.text }}
          //- Tree(:data="companyListDown" @on-select-change="treeCheckChange")
          //- Select(v-model="selectedCompanyId" @on-change="companySelect")
          //-   OptionGroup(v-for="item of companyListDown" :label="item.name")
          //-     Option(
          //-       v-for="(c_item, c_index) in item.children"
          //-       :value="c_item.id"
          //-       :key="c_index"
          //-     ) {{c_item.name}}
      .clearfix(slot="footer")
        Button(type="text" @click="cancel") 取消
        //- Button(type="primary" @click="postEmployeeTransfer" :disabled="!selectedCompanyId") 确定
        Button(type="primary" @click="postEmployeeTransfer") 确定
</template>

<script>
import { EmployeesApi } from '@/api/Employees.api.js'

export default {
  name: '',

  props: {
  },

  data () {
    return {
      isShowMobilizeModal: false,
      selectedEmployeeArr: [],
      companyListDown: [],
      selectedCompanyId: '',
      selectedCompanyName: ''
    }
  },

  watch: {
  },

  mounted () {
  },

  methods: {
    cancel () {
      this.isShowMobilizeModal = false
    },

    // 获取调动的所有公司
    async getEmployeeTransferAllCompanys () {
      let res = await EmployeesApi.getTransferAllCompanysList({ companyGuid: this.selectedEmployeeArr[0].companyId })
      console.log('获取调动的所有公司: ', res)
      if (res.status === 200 && res.data.success) {
        this.companyListDown = res.data.data
      } else {
        this.companyListDown = []
      }
    },

    companySelect (id) {
      this.selectedCompanyId = id
      // this.selectedCompanyName = this.companyListDown[index].name
      // console.log(this.companyListDown[index])
      this.companyListDown.map(item => {
        item.children.map(c_item => {
          if (c_item.id === id) {
            this.selectedCompanyName = c_item.name
          }
        })
        console.log('item: ', item)
        // for (var i of item) {
        //   console.log(i)
        // }
      })
    },

    treeCheckChange (value) {
      console.log('被勾选的节点有this.selectNode: ', value[0])
      if (value[0]) {
        this.selectedCompanyId = value[0].id
        this.selectedCompanyName = value[0].title
      } else {
        this.selectedCompanyId = ''
        this.selectedCompanyName = ''
      }
    },

    // 员工调动保存
    async postEmployeeTransfer () {
      if (!this.selectedCompanyId) {
        this.$Message.error({
          content: '请选择调离单位',
          duration: 2,
          closable: true
        })
      } else {
        var tempEmployeeIds = []
        this.selectedEmployeeArr.map(item => {
          tempEmployeeIds.push(item.id)
        })
        var params = {
          EmployeeIds: tempEmployeeIds,
          Companyid: this.selectedCompanyId,
          CompanyName: this.selectedCompanyName
        }
        let res = await EmployeesApi.postEmployeeTransfer(params)
        console.log('员工调动保存: ', res)
        if (res.status === 200 && res.data.success) {
          this.$Message.success(res.data.message)
          this.$emit('query')
          this.isShowMobilizeModal = false
        } else {
          this.$Message.error({
            content: res.data.message,
            duration: 10,
            closable: true
          })
        }
      }
    }
  }
}
</script>

<style lang="less" scope>
.ivu-tree-title-selected{
  padding-right: 30px;
  position: relative;
  &:before{
    content: "\F171";
    font-family: Ionicons;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    text-rendering: auto;
    line-height: 1;
    position: absolute;
    right: 0;
    top: -3px;
    font-size: 24px;
    color: @error_color;
  }
}
</style>
